<style>
    @font-face {
        font-family: 'icomoon';
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
    /* 定义外部容器样式 */
    .recommendation {
        display: flex; /* 使用 Flex 布局 */
        align-items: center; /* 垂直居中对齐 */
        justify-content: space-between; /* 两侧对齐，中间留空 */
    }

    /* 定义分页按钮样式 */
    .pagination-button {
        cursor: pointer;
        margin: 0 10px; /* 调整按钮之间的间距 */
    }

    /* 定义推荐歌曲容器样式 */
    .recommend-container {
        display: flex; /* 使用 Flex 布局 */
        flex-wrap: wrap; /* 换行显示 */
    }

    /* 定义单个歌曲链接样式 */
    .single-song-link {
        background-color: #e2cac2;
        text-decoration: none;
        color: #333; /* 设置文字颜色 */
        margin: 10px; /* 调整歌曲链接之间的间距 */
        padding: 10px; /* 添加内边距，增加点击区域 */
        border-radius: 5px; /* 圆角边框 */
        transition: background-color 0.3s ease; /* 添加渐变过渡效果 */
    }

    /* 鼠标悬停时的样式 */
    .single-song-link:hover {
        background-color: #d0b5ad; /* 更改背景颜色 */
    }


    /* 定义歌曲信息容器样式 */
    .song-info-container {
        text-align: center; /* 居中对齐 */
    }

    /* 定义歌曲信息样式 */
    .song-info {
        font-weight: bold; /* 加粗文字 */
    }

</style>


<div class="findMusic">

    <div class="find-top">
        <div class="carousel">
            <!-- 左右箭头 -->
            <a href="javascript:void(0);" class="arrow-left"><span></span></a>
            <a href="javascript:void(0);" class="arrow-right"><span></span></a>
            <!-- 小圆点 -->
            <ol class="circle"></ol>
            <!-- 轮播图片 -->
            <div class="carousel_main">
                <div class="carousel-box">
                    <ul>
                        <li id="0"><a href="#"><img src="imgs/01.jpg"></a></li>
                        <li id="1"><a href="#"><img src="imgs/02.jpg"></a></li>
                        <li id="2" class="current"><a href="#"><img src="imgs/03.jpg"></a></li>
                        <li id="3"><a href="#"><img src="imgs/04.jpg"></a></li>
                        <li id="4"><a href="#"><img src="imgs/05.jpg"></a></li>
                        <li id="5"><a href="#"><img src="imgs/06.jpg"></a></li>
                        <li id="6"><a href="#"><img src="imgs/07.jpg"></a></li>
                        <li id="7"><a href="#"><img src="imgs/08.jpg"></a></li>
                        <li id="8"><a href="#"><img src="imgs/09.jpg"></a></li>
                        <li id="9"><a href="#"><img src="imgs/10.jpg"></a></li>
                    </ul>
                </div>

                <div class="adv">
                    <img style="margin: auto;width: 250px;height:290px" src="imgs/R-C.png" alt=""/>
                </div>
            </div>
        </div>
    </div>

    <div class="find-body" id="findMusicApp">
        <div class="find-body-box">
            <div v-if="isLoginRight">
                <h2>猜你喜欢</h2>
                <div class="recommendation">
                    <div class="pagination">
                        <div class="pagination-button" @click="loadRecommend(recommend.pageNum-1)">&lt; 上一页</div>
                    </div>
                    <div class="recommend-container">
                        <a :href="'/music_platform/pages/song_detail.html?mid='+song.mid" v-for="song in recommend.list" class="single-song-link">
                            <div class="song-info-container">
                                <div class="song-info">{{ song.mname }}</div>
                                <div class="song-info">{{ song.singer.sname }}</div>
                            </div>
                        </a>
                    </div>
                    <div class="pagination">
                        <div class="pagination-button" @click="loadRecommend(recommend.pageNum+1)">下一页 &gt;</div>
                    </div>
                </div>
            </div>

            <div class="find-body-left">

                <div>
                    <div class="left-top">
                        <a class="hot" href="#">热门推荐</a>
                        <ul class="">
                            <li v-for="(item,index) in categoryList.slice(0,4)" style="display: inline"><a href="#">&nbsp;{{item.cname}}&nbsp;</a></li>
                        </ul>
<!--                        <a class="more" id="moreSong">更多</a>-->
                    </div>

                    <div class="first-body">
                        <ul>
                            <li v-for="(item,index) in playList">
                                <div>
                                    <img v-if="item.pic" :src="'/music_platform'+item.pic" alt="" style="width: 100px;height: 100px">
                                    <img v-else src="/music_platform/pages/upload/song01.jpg" alt="" style="width: 100px;height: 100px">
                                    <a :href="'/music_platform/pages/playList_detail.html?plid='+item.plid"></a>
                                    <div class="m-auto">
                                        <span>{{item.plname}}</span>
                                    </div>
                                </div>
                                <p><a href="#" style=" overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 3; ">{{item.desc}}
                                </a></p>
                            </li>
                        </ul>
                    </div>
                </div>

                <div>
                    <div class="left-top">
                        <a class="hot" href="#">新碟上架</a>
<!--                        <a class="more" href="#">更多</a>-->
                    </div>

                    <div class="second-body">
                        <div class="disk">
                            <div>
                                <div class="carousel2">
                                    <ul class="pre-ul">
                                        <li>
                                            <div>
                                                <img src="upload/disk06.png">
                                                <a href="#"></a>
                                                <span></span>
                                            </div>
                                            <p><a href="#">廿</a></p>
                                            <p><a href="#">王一博</a></p>
                                        </li>
                                        <li>
                                            <div>
                                                <img src="upload/disk07.png">
                                                <a href="#"></a>
                                                <span></span>
                                            </div>
                                            <p><a href="#">洛城</a></p>
                                            <p><a href="#">薛之谦</a></p>
                                        </li>
                                        <li>
                                            <div>
                                                <img src="upload/disk08.png">
                                                <a href="#"></a>
                                                <span></span>
                                            </div>
                                            <p><a href="#">信徒</a></p>
                                            <p><a href="#">谢帝</a></p>
                                        </li>
                                        <li>
                                            <div>
                                                <img src="upload/disk09.png">
                                                <a href="#"></a>
                                                <span></span>
                                            </div>
                                            <p><a href="#">最后的水族馆</a></p>
                                            <p><a href="#">裘德</a></p>
                                        </li>
                                        <li>
                                            <div>
                                                <img src="upload/disk10.jpg">
                                                <a href="#"></a>
                                                <span></span>
                                            </div>
                                            <p><a href="#">I'M MORE SOBER WHEN I'M DRUNK</a></p>
                                            <p><a href="#">韦礼安</a></p>
                                        </li>
                                    </ul>
                                    <ul class="cur-ul">
                                        <li>
                                            <div>
                                                <img src="upload/disk01.jpg">
                                                <a href="#"></a>
                                                <span></span>
                                            </div>
                                            <p><a href="#">学友 经典 世界巡回演唱会 台北站 (Live)</a></p>
                                            <p><a href="#">张学友</a></p>
                                        </li>
                                        <li>
                                            <div>
                                                <img src="upload/disk02.png">
                                                <a href="#"></a>
                                                <span></span>
                                            </div>
                                            <p><a href="#">异界来客</a></p>
                                            <p><a href="#">幼稚园杀手</a></p>
                                        </li>
                                        <li>
                                            <div>
                                                <img src="upload/disk03.png">
                                                <a href="#"></a>
                                                <span></span>
                                            </div>
                                            <p><a href="#">对等关系</a></p>
                                            <p><a href="#">李荣浩&nbsp;&nbsp;/&nbsp;&nbsp;张惠妹</a></p>
                                        </li>
                                        <li>
                                            <div>
                                                <img src="upload/disk04.jpg">
                                                <a href="#"></a>
                                                <span></span>
                                            </div>
                                            <p><a href="#">孤勇者</a></p>
                                            <p><a href="#">陈奕迅</a></p>
                                        </li>
                                        <li>
                                            <div>
                                                <img src="upload/disk05.jpg">
                                                <a href="#"></a>
                                                <span></span>
                                            </div>
                                            <p><a href="#">许光汉</a></p>
                                            <p><a href="#">许光汉</a></p>
                                        </li>
                                    </ul>
                                    <ul class="next-ul">
                                        <li>
                                            <div>
                                                <img src="upload/disk07.png">
                                                <a href="#"></a>
                                                <span></span>
                                            </div>
                                            <p><a href="#">洛城</a></p>
                                            <p><a href="#">薛之谦</a></p>
                                        </li>
                                        <li>
                                            <div>
                                                <img src="upload/disk10.jpg">
                                                <a href="#"></a>
                                                <span></span>
                                            </div>
                                            <p><a href="#">I'M MORE SOBER WHEN I'M DRUNK</a></p>
                                            <p><a href="#">韦礼安</a></p>
                                        </li>
                                        <li>
                                            <div>
                                                <img src="upload/disk02.png">
                                                <a href="#"></a>
                                                <span></span>
                                            </div>
                                            <p><a href="#">异界来客</a></p>
                                            <p><a href="#">幼稚园杀手</a></p>
                                        </li>
                                        <li>
                                            <div>
                                                <img src="upload/disk04.jpg">
                                                <a href="#"></a>
                                                <span></span>
                                            </div>
                                            <p><a href="#">孤勇者</a></p>
                                            <p><a href="#">陈奕迅</a></p>
                                        </li>
                                        <li>
                                            <div>
                                                <img src="upload/disk05.jpg">
                                                <a href="#"></a>
                                                <span></span>
                                            </div>
                                            <p><a href="#">许光汉</a></p>
                                            <p><a href="#">许光汉</a></p>
                                        </li>
                                    </ul>
                                </div>
                                <a class="carousel2-left" href="javascript:void(0);"></a>
                                <a class="carousel2-right" href="javascript:void(0);"></a>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <div class="left-top">
                        <a class="hot" href="#">榜单</a>
<!--                        <a class="more" href="#">更多</a>-->
                    </div>
                    <div class="third-body">
                        <dl>
                            <dt>
                                <div class="dt-left">
                                    <img src="upload/18696095720518497.png">
                                    <a href="javascript:void(0);"></a>
                                </div>
                                <div class="dt-right">
                                    <a href="javascript:void(0);">
                                        <h3>飙升榜</h3>
                                    </a>
                                    <a href="javascript:void(0);"></a>
                                    <a href="javascript:void(0);"></a>
                                </div>
                            </dt>
                            <dd>
                                <ol>
                                    <li v-for="(song,index) in S_pageInfo.list">
                                        <span class="red_span">{{index+1}}</span>
                                        <a :href="'/music_platform/pages/song_detail.html?mid='+song.mid">{{song.mname}}</a>
                                        <div id="11" class="trible">
                                            <a href="javascript:void(0);"></a>
                                            <a href="javascript:void(0);"></a>
                                            <a href="javascript:void(0);"></a>
                                        </div>
                                    </li>
                                </ol>
                            </dd>
                        </dl>

                        <dl>
                            <dt>
                                <div class="dt-left">
                                    <img src="upload/18713687906568048.png">
                                    <a href="javascript:void(0);"></a>
                                </div>
                                <div class="dt-right">
                                    <a href="javascript:void(0);">
                                        <h3>新歌榜</h3>
                                    </a>
                                    <a href="javascript:void(0);"></a>
                                    <a href="javascript:void(0);"></a>
                                </div>
                            </dt>
                            <dd>
                                <ol>
                                    <li v-for="(song,index) in N_pageInfo.list">
                                        <span class="red_span">{{index+1}}</span>
                                        <a :href="'/music_platform/pages/song_detail.html?mid='+song.mid">{{song.mname}}</a>
                                        <div class="trible">
                                            <a href="javascript:void(0);"></a>
                                            <a href="javascript:void(0);"></a>
                                            <a href="javascript:void(0);"></a>
                                        </div>
                                    </li>
                                </ol>
                            </dd>
                        </dl>

                        <dl>
                            <dt>
                                <div class="dt-left">
                                    <img src="rank-imgs/rl4.png">
                                    <a href="javascript:void(0);"></a>
                                </div>
                                <div class="dt-right">
                                    <a href="javascript:void(0);">
                                        <h3>热歌榜</h3>
                                    </a>
                                    <a href="javascript:void(0);"></a>
                                    <a href="javascript:void(0);"></a>
                                </div>
                            </dt>
                            <dd>
                                <ol>
                                    <li v-for="(song,index) in H_pageInfo.list">
                                        <span class="red_span">{{index+1}}</span>
                                        <a :href="'/music_platform/pages/song_detail.html?mid='+song.mid">{{song.mname}}</a>
                                        <div class="trible">
                                            <a href="javascript:void(0);"></a>
                                            <a href="javascript:void(0);"></a>
                                            <a href="javascript:void(0);"></a>
                                        </div>
                                    </li>
                                </ol>
                            </dd>
                        </dl>
                    </div>
                </div>


            </div>

            <div class="find-body-right">
                <div>
                    <p>登录即可享受无限收藏的乐趣，并且无限同步到手机</p>
                </div>

                <!--以下为歌手-->
                <div>
                    <h3>
                        <span>入驻歌手</span>
<!--                        <a href="#"> 查看全部&nbsp;></a>-->
                    </h3>
                    <ul>
                        <li>
                            <a href="#">
                                <img src="upload/musician1.png" alt="">
                                <div>
                                    <h4>张惠妹aMEI</h4>
                                    <p>台湾歌手张惠妹</p>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="upload/musician2.jpg" alt="">
                                <div>
                                    <h4>Fine乐团</h4>
                                    <p>独立音乐人</p>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="upload/musician3.jpg" alt="">
                                <div>
                                    <h4>萬曉利</h4>
                                    <p>民谣歌手、中国现代民谣的代表人物之一</p>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="upload/musician4.jpg" alt="">
                                <div>
                                    <h4>音乐人赵雷</h4>
                                    <p>民谣歌手</p>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="upload/musician5.jpg" alt="">
                                <div>
                                    <h4>王三博</h4>
                                    <p>音乐人</p>
                                </div>
                            </a>
                        </li>

                    </ul>
                </div>

            </div>

        </div>
    </div>


    <!-- 引入JavaScript文件 -->
    <script src="js/carousel.js"></script>
    <script src="js/carousel2.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        var ol_li_ele = document.querySelectorAll('dd>ol>li');
        for (i = 0; i < ol_li_ele.length; i++) {
            ol_li_ele[i].addEventListener('mouseenter', function () {
                this.children[2].style.display = 'block';
            });
            ol_li_ele[i].addEventListener('mouseleave', function () {
                this.children[2].style.display = 'none';
            });
        }

        var li_a_ele = document.querySelectorAll('.carousel2>ul>li>div');
        for (i = 0; i < li_a_ele.length; i++) {
            li_a_ele[i].addEventListener('mouseenter', function () {
                this.children[2].style.display = 'block';
            });
            li_a_ele[i].addEventListener('mouseleave', function () {
                this.children[2].style.display = 'none';
            });
        }
    </script>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script>
        new Vue({
            el:"#findMusicApp",
            data:{
                singerList:[],
                playList:[],
                songList:[],
                categoryList:[],
                albumList:[],
                recommend:{},
                isLoginRight:false,
                S_pageInfo:{},
                N_pageInfo:{},
                H_pageInfo:{}
            },
            methods:{
                loadCategory:function (){
                    let _this = this;
                    axios.get("/music_platform/cate/findAll").then(function (response){
                        _this.categoryList = response.data.data;
                    })
                },
                loadPlayList:function (){
                    let _this = this;
                    axios.get("/music_platform/playlist/find",{
                        params:{
                            pageNum:1,
                            pageSize:8
                        }
                    }).then(function (response){
                        _this.playList = response.data.data.list;
                    })
                },
                async isLogin(){
                    let _this = this;
                    await axios.get("/music_platform/user/session").then(function (response) {
                        if (response.data.flag){
                            _this.isLoginRight = true;
                        }else {
                            _this.isLoginRight = false;
                        }
                    })
                },
                async loadRecommend(pageNum){
                    await this.isLogin();
                    if (this.isLoginRight){
                        let _this = this;
                        axios.get("/music_platform/recommend?pageNum=1").then(function (response) {
                            _this.recommend = response.data
                        })
                    }
                },
                loadSoaringPageInfo() {
                    const _this = this;
                    axios.get("/music_platform/singleSong/soaring?pageNum=1").then(function (response) {
                        _this.S_pageInfo = response.data
                    })
                },
                loadNewPageInfo() {
                    const _this = this;
                    axios.get("/music_platform/singleSong/new?pageNum=1").then(function (response) {
                        _this.N_pageInfo = response.data
                    })
                },
                loadHotPageInfo() {
                    const _this = this;
                    axios.get("/music_platform/singleSong/hot?pageNum=1").then(function (response) {
                        _this.H_pageInfo = response.data
                    })
                },
            },
            created:function (){
                this.loadRecommend(1);
                this.loadCategory();
                this.loadPlayList();
                this.loadSoaringPageInfo();
                this.loadNewPageInfo();
                this.loadHotPageInfo();
            }
        })
    </script>
</div>